<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch" label-width="150px"
            label-position="right">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="客户">
                        <el-input placeholder="请输入客户" v-model="queryParams.custtext" class="input-with-select">
                            <el-select v-model="queryParams.custtype" slot="prepend" placeholder="请选择">
                                <el-option label="ID" value="ID"></el-option>
                                <el-option label="手机号" value="mobile"></el-option>
                                <el-option label="姓名" value="custName"></el-option>
                            </el-select>
                        </el-input>
                    </el-form-item>

                </el-col>
                <el-col :span="6">

                    <el-form-item label="状态" prop="status">
                        <el-select v-model="queryParams.status" placeholder="请选择状态" style="width:50%" clearable>
                            <el-option v-for="dict in dict.type.crm_customerStatus" :key="dict.value"
                                :label="dict.label" :value="dict.value" />
                        </el-select>
                        <el-select v-model="queryParams.candoFlag" placeholder="上门结论" style="width:50%" clearable>
                            <el-option v-for="dict in dict.type.crm_doorstep_conclusion" :key="dict.value"
                                :label="dict.label" :value="dict.value" />
                        </el-select>

                    </el-form-item>

                </el-col>
                <el-col :span="6">

                    <el-form-item label="星级" prop="starLevel">
                        <el-select v-model="queryParams.starLevel" placeholder="请选择星级" clearable>
                            <el-option v-for="dict in dict.type.crm_star" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="需求额度" prop="amountType">
                        <el-select v-model="queryParams.amountType" placeholder="请选择需求额度" clearable style="width:100%">
                            <el-option v-for="dict in dict.type.crm_amount" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">

                    <el-form-item label="最近处理" prop="updateTime">
                        <el-date-picker v-model="updateTime" type="daterange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
                            value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="申请时间" prop="applyTime">
                        <el-date-picker v-model="applyTime" type="daterange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            value-format="yyyy-MM-dd" format="yyyy-MM-dd" align="right" style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="本地号段" prop="localPhoneFlag">
                        <el-select v-model="queryParams.localPhoneFlag" placeholder="请选择本地号段" clearable>
                            <el-option v-for="dict in whether" :key="dict.value" v-if="dict.value != ''"
                                :label="dict.label" :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="最近分配" prop="reDistributeTime">
                        <el-date-picker v-model="reDistributeTime" type="daterange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            value-format="yyyy-MM-dd" format="yyyy-MM-dd" align="right" style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="部门归属" prop="deptId">
                        <treeselect v-model="queryParams.deptId" :options="deptOptions" :show-count="true"
                            placeholder="请选择部门归属" :default-expand-level="4" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="本地户籍" prop="localPersonFlag">
                        <el-select v-model="queryParams.localPersonFlag" placeholder="请选择本地户籍" clearable>
                            <el-option v-for="dict in whether" :key="dict.value" :label="dict.label"
                                :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="原始分配" prop="oldDistributeTime">
                        <el-date-picker v-model="oldDistributeTime" type="daterange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            value-format="yyyy-MM-dd" align="right" style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="备注搜索" prop="remark">
                        <el-input v-model="queryParams.remark" placeholder="备注搜索" clearable
                            @keyup.enter.native="handleQuery" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="跟进次数">
                        <el-input-number v-model="queryParams.followTimeStart" controls-position="right"
                            placeholder="最小跟进次数" :min="0"></el-input-number>
                        <el-input-number v-model="queryParams.followTimeEnd" controls-position="right"
                            placeholder="最大跟进次数" :min="0"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <el-form-item label="本地房产" prop="hasLocalHouse">
                        <el-select v-model="queryParams.hasLocalHouse" placeholder="请选择本地房产" clearable>
                            <el-option v-for="dict in whether" :key="dict.value" :label="dict.label"
                                :value="dict.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="客户上门" prop="lastVisitTime">

                        <el-date-picker v-model="lastVisitTime" type="daterange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            value-format="yyyy-MM-dd" align="right" style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="客户签约" prop="lastSignTime">
                        <el-date-picker v-model="lastSignTime" type="daterange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            value-format="yyyy-MM-dd" format="yyyy-MM-dd" align="right" style="width: 100%;">
                        </el-date-picker>

                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="客户放款" prop="lastLoanTime">

                        <el-date-picker v-model="lastLoanTime" type="daterange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            value-format="yyyy-MM-dd" format="yyyy-MM-dd" align="right" style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>

                <el-col :span="6">
                    <el-form-item label="年龄" prop="ageLimit">
                        <el-select v-model="queryParams.ageLimit" placeholder="年龄" clearable>
                            <el-option label="- 不限 -" value=""></el-option>
                            <el-option label="小于18" value="0-17"></el-option>
                            <el-option label="18-24" value="18-2"></el-option>
                            <el-option label="25-29" value="25-29"></el-option>
                            <el-option label="30-54" value="30-54"></el-option>
                            <el-option label="55以上" value="55-10000"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="扫码客户" prop="lastIntroduceTime">
                        <el-date-picker v-model="lastIntroduceTime" type="daterange" :picker-options="pickerOptions"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                            value-format="yyyy-MM-dd" format="yyyy-MM-dd" align="right" style="width: 100%;">
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="未跟进天数" prop="unfollow_day">
                        <el-input v-model="queryParams.unfollow_day" placeholder="未跟进天数" clearable
                            @keyup.enter.native="handleQuery" controls-position="right" />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>
        <el-table v-loading="loading" :data="custinfoList" fit style="width: 100%">
            <el-table-column label="序号" type="index" align="center" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="ID" align="center" prop="id" min-width="3%" />
            <el-table-column label="姓名" align="center" prop="custName" min-width="3%">
                <template slot-scope="scope">
                    {{ encryptionName(scope.row.custName) }}
                </template>
            </el-table-column>
            
            <el-table-column label="年龄" align="center" prop="age" min-width="3%" />
            <el-table-column label="状态" align="center" prop="status" min-width="3%">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.crm_customerStatus" :value="scope.row.status" min-width="3%" />
                </template>
            </el-table-column>
            <el-table-column label="部门归属" align="center" prop="orgId" min-width="3%">
                <template slot-scope="scope">
                    {{ getDeptByOrgId(scope.row.deptId) }}
                </template>
            </el-table-column>

            <el-table-column label="顾问" align="center" prop="empId" min-width="3%">
                <template slot-scope="scope">
                    {{ getNameByEmpId(scope.row.userId) }}
                </template>
            </el-table-column>
            <el-table-column label="星级" align="center" prop="starLevel" min-width="3%">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.crm_star" :value="scope.row.starLevel" />
                </template>
            </el-table-column>
            <el-table-column label="跟进次数" align="center" prop="starLevel" min-width="3%" />
            <el-table-column label="备注" align="left" width="280" prop="remark" min-width="3%">
                <template slot-scope="scope">
                    <span v-html='scope.row.remark' class="span_remark"></span>
                </template>
            </el-table-column>
            <el-table-column label="申请额度" align="center" prop="amountType" min-width="3%">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.crm_amount" :value="scope.row.amountType" />
                </template>
            </el-table-column>
            <el-table-column label="最后处理顾问" align="center" prop="lastUpdateBy" min-width="3%">
                <template slot-scope="scope">
                    {{ getNameByEmpId(scope.row.lastUpdateBy) }}
                </template>
            </el-table-column>

            <el-table-column label="最近处理" align="center" prop="updateTime" min-width="3%"><template slot-scope="scope">
                    <span>{{ parseTime(scope.row.updateTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="最近备注" align="center" prop="lastRemarkTime" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.lastRemarkTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="申请时间" align="center" prop="applyTime" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.applyTime) }}</span>
                </template>
            </el-table-column>

            <el-table-column label="分配" align="center" prop="oldDistributeTime" min-width="3%">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.oldDistributeTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="城市" align="center" prop="city" min-width="3%" />
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

    </div>
</template>

<script>
import {
    getCustList
} from "@/api/crmsys/custinfo/custinfo";

import { deptTreeSelect, childrenAlldeptTree } from "@/api/system/user";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";


export default {
    name: "CustInfoList",
    dicts: [
        "crm_yesno",
        "crm_sex",
        "crm_has",
        "crm_star",
        "crm_type",
        "crm_paytype",
        "crm_customerStatus",
        "crm_doorstep_conclusion",
        "crm_marriage",
        "crm_work",
        "crm_roleCategory",
        "crm_amount"
    ],
    components: { Treeselect },
    props: {
        form: {
            type: Object,
            default: {}
        },
    },
    watch: {
        form(newvalue, oldvalue) {
            //监听参数变化，将修改查询条件然后执行加载事件

            this.getCustList(newvalue);
        }
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: false,
            // 总条数
            total: 0,
            // 客户信息表格数据
            custinfoList: [],
            // 弹出层标题
            title: "",
            //
            whether: [{ label: "是", value: "1" }, { label: "否", value: "0" }],
            // 显示弹出层
            open: false,
            applyTime: null,
            updateTime: null,
            oldDistributeTime: null,
            reDistributeTime: null,
            lastRemarkTime: null,
            lastIntroduceTime: null,
            lastVisitTime: null,
            lastSignTime: null,
            lastLoanTime: null,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 100,
                id: null,
                custName: null,
                mobile: null,
                age: null,
                sex: null,
                household: null,
                officeTel: null,
                marriaged: null,
                hasHouse: null,
                houseType: null,
                hasCar: null,
                hasCredit: null,
                hasPolicy: null,
                hasSocial: null,
                socialYears: null,
                socialAmt: null,
                hasFund: null,
                fundYears: null,
                fundAmt: null,
                workNature: null,
                workPaytype: null,
                hasCompany: null,
                debtAmt: null,
                debtOverdue: null,
                loverKnowed: null,
                zhimaScore: null,
                wedebtLimit: null,
                deptId: null,
                empId: null,
                starLevel: null,
                status: null,
                remark: null,
                localPersonFlag: null,
                localPhoneFlag: null,
                amountType: null,
                hasLocalHouse: null,
                custtext: null,
                custtype: null,
                followTimeStart: null,
                followTimeEnd: null,
                loan_content: null,
                loan_condition: null,
                unfollow_day: null,
                ageLimit: null
            },
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            // 部门归属树选项
            deptOptions: [],
        };
    },
    created() {
        this.getCustList(this.form);
        this.getDeptTree();
    },
    activated() {
    },
    methods: {
        /** 查询客户信息列表 */
        getList() {
            this.loading = true;
            this.getSpecialQuery();

            getCustList(this.queryParams).then(response => {
                this.custinfoList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        //特殊查询字段处理
        getSpecialQuery() {
            var age = this.queryParams.ageLimit;
            if (age != null) {
                this.addDateRange(this.queryParams, age.split("-"), "age")
            }
            // 时间区间处理
            this.addDateRange2(this.queryParams, this.applyTime, "applyTime")
            this.addDateRange2(this.queryParams, this.updateTime, "updateTime")
            this.addDateRange2(this.queryParams, this.oldDistributeTime, "oldDistributeTime")
            this.addDateRange2(this.queryParams, this.reDistributeTime, "reDistributeTime")
            this.addDateRange2(this.queryParams, this.lastRemarkTime, "lastRemarkTime")
            this.addDateRange2(this.queryParams, this.lastIntroduceTime, "lastIntroduceTime")
            this.addDateRange2(this.queryParams, this.lastVisitTime, "lastVisitTime")
            this.addDateRange2(this.queryParams, this.lastSignTime, "lastSignTime")
            this.addDateRange2(this.queryParams, this.lastLoanTime, "lastLoanTime")
            this.addDateRange2(this.queryParams, this.lastLoanTime, "lastLoanTime")

            this.queryParams.hasHouse = null
            this.queryParams.hasCar = null
            this.queryParams.hasPolicy = null
            this.queryParams.hasFund = null
            this.queryParams.id = null
            this.queryParams.mobile = null
            this.queryParams.custName = null

            const custtype = this.queryParams.custtype;
            if (custtype == "ID") {
                this.queryParams.id = this.queryParams.custtext
            }
            if (custtype == "mobile") {
                this.queryParams.mobile = this.queryParams.custtext

            }
            if (custtype == "custName") {
                this.queryParams.custName = this.queryParams.custtext
            }


            const loan_condition = this.queryParams.loan_condition;
            const loan_content = this.queryParams.loan_content;
            if (loan_condition == "hasHouse") {
                this.queryParams.hasHouse = loan_content
            }
            if (loan_condition == "hasCar") {
                this.queryParams.hasCar = loan_content
            }
            if (loan_condition == "hasPolicy") {
                this.queryParams.hasPolicy = loan_content
            }
            if (loan_condition == "hasFund") {
                this.queryParams.hasFund = loan_content
            }
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");

            this.applyTime = null;
            this.updateTime = null;
            this.oldDistributeTime = null;
            this.reDistributeTime = null;
            this.lastRemarkTime = null;
            this.lastIntroduceTime = null;
            this.lastVisitTime = null;
            this.lastSignTime = null;
            this.lastLoanTime = null;

            this.handleQuery();
        },
        /** 查询部门归属下拉树结构 */
        getDeptTree() {

            var dept = { deptId: this.$store.state.user.deptid }
            childrenAlldeptTree(dept).then(response => {
                this.deptOptions = response.data;
            });
        },
        getCustList(newvalue) {
            this.queryParams = newvalue;
            let specialParams = newvalue.specialParams;
            if (specialParams != null) {
                for (let key in specialParams) {
                    let value = specialParams[key];
                    this.$set(this.$data, key, value);
                }
            }
            this.getList();
        }

    }
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/command.scss';
</style>
